/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Dimensions,
  ToastAndroid,
  View
} from 'react-native';
var AndroidSegmented = require('./AndroidSegmented');
var deviceWidth = Dimensions.get('window').width;
var deviceHeight = Dimensions.get('window').height;

export default class ReactNativeSegmentedAndroidIos extends Component {
  onSelectPosition(event){
    console.log(event);
    ToastAndroid.show('segment '+event.selected, ToastAndroid.SHORT)
  }
  render() {
    return (
      <View>
        <AndroidSegmented
          tintColor={['#ff0000', '#ffffff']}
          style={{
            width: deviceWidth, height: 60, backgroundColor: '#fff000',
            justifyContent: 'center',
            alignItems: 'center'
          }}
          childText={['One', 'Two', 'Three', 'Four', "Five"]}
          orientation='horizontal'
          selectedPosition={0}
          onChange={this.onSelectPosition} />

        <AndroidSegmented
          tintColor={['#009688', '#ffffff']}
          style={{
            width: deviceWidth, height: 200, backgroundColor: '#fff000',
            justifyContent: 'center',
            alignItems: 'center'
          }}
          childText={['One', 'Two', 'Three', 'Four', "Five"]}
          orientation='vertical'
          selectedPosition={0}
          onChange={this.onSelectPosition} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('ReactNativeSegmentedAndroidIos', () => ReactNativeSegmentedAndroidIos);
